<!-- <template>
    <div>
    <div id="main" style="width:600px;height:300px;"></div>
    
     <el-row>
        <el-col :span="10"><div class="grid-content ep-bg-purple-dark" />
        <ul>
       <li v-for="i in meslist">
      {{i.mes}}
       
       </li>
      
        </ul>
        </el-col>
      
     </el-row>
     <el-row>
     <el-input v-model="smes" style="width: 240px"></el-input>
     <el-button @click="send">提交</el-button>
     
     </el-row>
    
      
      
    </div>
</template>

<script setup>
import {ref,onMounted}  from 'vue'
import {useRoute}  from 'vue-router'

const route = useRoute()

//搜索用的
const socket = ref(null)
const meslist=ref([])
const data=ref()
const userid=route.query.id
const smes=ref()



const initwesockt=()=>{
    var room = 'user'+userid
    alert(room)
    socket.value = new WebSocket("ws://localhost:8000/ws/room/"+room+"/");

    // 当客户端和服务端刚创建好连接(self.accept)之后，自动触发.
    socket.value.onopen =  (event)=>{
        console.log("连接成功")
    }

    // 回调函数，客户端接收服务端消息
    socket.value.onmessage =  (event)=>{
    
        data.value=JSON.parse(event.data)
        meslist.value.push({'mes':data.value.mes})
        
    }

    // // 当断开连接时，触发该函数
    // this.socket.onclose =function (event){
    // let tag = document.createElement("div");
    // tag.innerText = "[连接断开]";
    // document.getElementById("message").appendChild(tag);
    // }

}
const send=()=>{
    socket.value.send(JSON.stringify({"mes":smes.value}))
}

onMounted(()=>{
    initwesockt()
    
})
</script> -->

<!-- 用户端 -->
<template>
    <div class="contion">
        <div class="mes">
            <el-icon :size="30" @click="back"><ArrowLeftBold /></el-icon>
            <span style="margin-left:150px;font-size:20px;"><b>客服</b></span>
        </div>
        <div class="messagedetail">
            <!-- 消息列表 -->
            <div v-for="msg in messagelist" :key="msg.id">
                <div v-if="msg.type === 'AI'" class="message_AI">
                        <img src="../img/6.jpg" alt="AI" class="img">
                        <div style="margin-top:10px;margin-left:10px;">{{ msg.mes }}</div>
                </div>
                <div v-if="msg.type === 'USER'" class="message_USER">
                        <img src="../img/21.jpg" alt="User" class="img">
                        <div style="margin-top:10px;margin-left:10px;">{{ msg.mes }}</div>
                </div>
            </div>
        </div>
        <div class="mess">
            <p>
                <el-input v-model="mes" placeholder="请输入内容" style="width:300px;margin-right:20px;"/>
                <el-button type="primary" @click="send">发送</el-button>
            </p>
        </div>
        <div class="tabbar-box"></div>
    </div>
    
</template>
    
<script setup>
import {showToast ,showFailToast } from 'vant';
import {ref,onMounted} from "vue"
import axios from "axios";
import { useRoute,useRouter } from "vue-router";
import {ElMessage} from "element-plus";
import http from "../http";
import router from '../router';


//搜索用的
const socket = ref(null)
// console.log(socket,"这里是带type的样子！！！！！！")

const userid= localStorage.getItem("userid")
const messagelist=ref([])
const mes=ref()


const back = () => {
    router.back();
}


const send=()=>{
    const room = 'user'+userid
    // const room='user11001'
    socket.value.send(JSON.stringify({"mes":mes.value , "to":room , "type":"USER" , "messagelist":messagelist.value})) 
    mes.value=''
}

const initwesockt=()=>{
    const room = 'user'+userid
    socket.value = new WebSocket("ws://localhost:8000/ws/room/"+room+"/");

    // 当客户端和服务端刚创建好连接(self.accept)之后，自动触发.
    socket.value.onopen =  (event)=>{
        console.log("连接成功")
    }

    // 回调函数，客户端接收服务端消息
    socket.value.onmessage =  (event)=>{
        
        const vdata = JSON.parse(event.data)
        console.log(vdata,"这是messagelist处理之前的样子！！！！！！！")
        messagelist.value.push(vdata)
        console.log(messagelist,"这是messagelist处理后的样子！！！！！！！")
    }

}

onMounted(()=>{
    initwesockt()
})
</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: middle;
}

.mes{
    width: 100%;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 20px;
    background-color:#fff;
    align-items: center;
    justify-content: center;
    top:0;
    color: #000;
    position: fixed;
    z-index: 100; /* 确保标签栏在内容之上 */
}

.messagedetail{
    margin-top: 80px;
}

.message_AI{
    display: flex;
    flex-direction: row;
    margin: 10px;
}

.message_USER{
    display: flex;
    flex-direction: row;
    margin: 10px;
}

.img{
    width: 40px;
    border-radius: 50%;
}

.mess{
    margin-left: 20px;
    position: fixed; /* 固定定位，保持在底部 */
    bottom: 0;
    z-index: 100; /* 确保在其他元素之上 */
}
</style>